<template>
  <lay-container fluid="true" class="localJob-box">
    <lay-card>
      <lay-form style="margin-top: 10px" :model="searchQuery" ref="queryRef">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="模块" label-width="80" prop="username">
              <lay-select class="search-input" v-model="searchQuery.beanName" :options="beanNameList" :allow-clear="true" @change="changeBeanName" placeholder="请选择">
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="方法" label-width="80" prop="nickName">
              <lay-select class="search-input" v-model="searchQuery.methodName" :options="methodNameList" :allow-clear="true" placeholder="请选择">
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="参数" label-width="80" prop="nickName">
              <lay-input v-model="searchQuery.methodParams" placeholder="请输入" :allow-clear="true" style="width: 98%">
              </lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="状态" label-width="80" prop="status">
              <lay-select class="search-input" v-model="searchQuery.status" :allow-clear="true" placeholder="请选择">
                <lay-select-option value="on" label="运行"></lay-select-option>
                <lay-select-option value="off" label="停止"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="primary" @click="localJobPage()"> 查询 </lay-button>
              <lay-button @click="toReset(queryRef,pageLocalJob)"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table
        :page="fxwPage.page"
        :height="'100%'"
        :columns="columns"
        :loading="fxwPage.loading.value"
        :default-toolbar="true"
        :data-source="fxwPage.dataSource.value"
        v-model:selected-keys="fxwPage.selectedKeys.value"
        @change="localJobPage">

        <template v-slot:toolbar>
          <lay-button v-perm="'localJob_add'" size="sm" type="primary" @click="toAddLocalJobDom">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增
          </lay-button>
        </template>

        <!-- 列插槽-start -->
        <template v-slot:status="{ row }">
          <lay-switch v-model="row.status"
                      onswitch-value="on" unswitch-value="off"
                      onswitch-text="启用"  unswitch-text="禁用"
                      @change="status =>changeStatus(row,status)">
          </lay-switch>
        </template>
        <template v-slot:role="{ row }">
          <lay-tag size="sm" v-for="userRole in row.userRoleVOList">{{userRole.roleName}}</lay-tag>
        </template>

        <template v-slot:_index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <!-- 列插槽-end -->

        <template v-slot:operator="{ row }">
          <lay-dropdown size="sm" updateAtScroll>
            <lay-button type="primary">操作</lay-button>
            <template #content>
              <lay-dropdown-menu>
                <lay-dropdown-menu-item v-perm="'localJob_log'" @click="toLogLocalJobDom(row.id)">日志</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'localJob_detail'" @click="toDetailLocalJobDom(row.id)">详情</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'localJob_edit'" @click="toEditLocalJobDom(row.id)">编辑</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'localJob_run'" @click="toRunLocalJobDom(row.id)">运行</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'localJob_remove'" @click="toRemoveLocalJobDom(row.id)">删除</lay-dropdown-menu-item>
              </lay-dropdown-menu>
            </template>
          </lay-dropdown>
        </template>

      </lay-table>
    </div>

    <!-- 外部组件 -->
    <add ref="addRef" title="新增任务" @refreshParent="localJobPage" :localJobDocument="localJobDocument"></add>
    <edit ref="editRef" title="编辑任务" :id="params_id" :localJobDocument="localJobDocument" @refreshParent="localJobPage"></edit>
    <detail ref="detailRef" title="任务详情" :id="params_id" ></detail>
    <run ref="runRef" title="执行任务" :id="params_id" :localJobDocument="localJobDocument"></run>
    <log ref="logRef" title="日志记录" :id="params_id"></log>

  </lay-container>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {pageLocalJob, localJobDocumentMap, statusLocalJob,removeLocalJob} from '@/api/module/localJob'
import detail from './detail.vue'
import add from './add.vue'
import useFxwPage from '@/hooks/useFxwPage'
import useFxwForm from "@/hooks/useFxwForm";
import {buildBeanNameOptions,buildMethodNameOptions} from '@/library/objectUtil'
import edit from "./edit.vue";
import {layer} from "@layui/layui-vue";
import Run from "./run.vue";
import Log from "./log.vue";

const {toReset} = useFxwForm()

const fxwPage = useFxwPage();
const queryRef = ref();
const searchQuery = ref({
  beanName: '',
  methodName: '',
  methodParams: '',
  status: '',
  pageNumber: 1,
  pageSize: 10,
})

const columns = ref([
  {title: '序号', width: '80px', key: '_index', customSlot: '_index'},
  // { title: '编号', width: '80px', key: 'id', fixed: 'left' },
  { title: '标题', width: '150px', key: 'jobTitle' },
  { title: '模块', width: '150px', key: 'beanName' },
  { title: '方法', width: '220px', key: 'methodName',},
  { title: '参数', width: '', key: 'methodParams' },
  { title: 'cron表达式', width: '120px', key: 'cronExpression' },
  { title: '状态', width: '100px', key: 'status',customSlot: 'status' },
  { title: '操作', width: '100px', customSlot: 'operator', key: 'operator', fixed: 'right' }
])

onMounted(()=>{
  localJobPage();
  initBeanNameList();
})

// 用户列表
const localJobPage = function (cp:any = fxwPage.page){
  searchQuery.value.pageNumber = cp.current;
  searchQuery.value.pageSize = cp.limit;
  fxwPage.loading.value = true;
  pageLocalJob(searchQuery.value).then(res=>{
    fxwPage.dataSource.value = res.data.records;

    fxwPage.loading.value = false;
    fxwPage.page.total = res.data.totalRow;
  })
}

// 筛选条件
const localJobDocument = ref<{
  [key: string]: object;
}>({});
const beanNameList = ref<Array<{label: string,value:string}>>()
const methodNameList = ref<Array<{label: string,value:string}>>()
const initBeanNameList = function (){
  localJobDocumentMap().then(res=>{
    localJobDocument.value = res.data;
    beanNameList.value = buildBeanNameOptions(res.data)
  })
}
const changeBeanName = function (v:string){
  methodNameList.value = buildMethodNameOptions(localJobDocument.value[v])
}

// 新增任务
const addRef = ref();
const toAddLocalJobDom = function (){
  addRef.value.changeVisible();
}


const params_id = ref();

// 任务详情
const detailRef = ref();
const toDetailLocalJobDom = (id:Number) =>{
  params_id.value = id;
  detailRef.value.changeVisible();
}

// 编辑任务
const editRef = ref();
const toEditLocalJobDom = function (id:Number){
  params_id.value = id;
  editRef.value.changeVisible();
}

// 切换状态
const statusLocalJobBo = ref({
  id:0,
  status: ''
});
const changeStatus = function (row:any,status:string) {
  statusLocalJobBo.value.id = row.id;
  statusLocalJobBo.value.status = status;

  const statusBak = row.status;
  statusLocalJob(statusLocalJobBo.value).then(res => {
    if (res.code == 200) {
      localJobPage();
    }else {
      row.status = statusBak;
    }
  })
};

// 删除任务
function toRemoveLocalJobDom(id:number) {
  layer.confirm("确认删除该任务？",{
    btn: [
      {
        text:'确认',
        callback: (index:string) => {
          removeLocalJob(id).then(res => {
            if (res.code == 200) {
              layer.close(index);
              localJobPage();
            }
          })
        }
      },
      {text:'取消', callback: (index:string) => {
          layer.close(index); }
      }
    ]
  })
}

// 运行
const runRef = ref();
const toRunLocalJobDom = function (id:Number){
  params_id.value = id;
  runRef.value.changeVisible();
}

// 日志
const logRef = ref();
const toLogLocalJobDom = function (id:Number){
  params_id.value = id;
  logRef.value.changeVisible();
}

</script>

<style scoped>
.localJob-box {
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 660px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  .layui-tag{
    padding: 0 3px;
    margin: 0 2px;
  }
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>